<template>
	<view>
		<userinfo v-if="user_options.toLogin" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
		<uni-fab :content="fab_content" class="fab" :pattern="fab_pattern" @trigger="trigger"></uni-fab>
		<view class="container">
			<view class="container-box">
				<view class="rate">评分</view>
				<view class="info-box">
					<uniRate size="32" max="5" @change='taprate' value="0"></uniRate>
					<view class="rate-text">{{ratenum}}分</view>
				</view>
				<view class="input-box">
					<textarea maxlength='1000' v-model="aricle_title" value="" placeholder="请输入评论内容" class="input-btn" />
					</view>
				<view class="">
					<sunuiUpimg :upImgConfig="upImgBasic" @onUpImg="upBasicData" @onImgDel="delImgInfo" ref="uImage"></sunuiUpimg>
				</view>
			</view>
			<view class="tips">
				还可上传{{imgnum}}张图片，已上传{{imglength}}张（非必填）
			</view>
		</view>
		<view class="btn">
			<button type="primary" :style="btn_style" class="btn-pry" @tap="uPublishTap">评论</button>
		</view>
	</view>
</template>

<script>
	import sunuiUpimg from "../../../appComponent/uni/sunui-upimg/sunui-upimg-basic.vue"
	import uniRate from "../../../appComponent/uni/uni-rate/uni-rate.vue"
	import uniFab from '../component/uni-fab/uni-fab.vue';
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	
	export default {
			data() {
				return {
					userInfo:{avatar: '../../../static/images/return-top.png', nickname: '昵称'},
					aricle_title:'',
					basicArr: [],
					listData:{},
					fab_content: [],
					fab_pattern:{},
					imglength: 0,
					imgnum: 9,
					ratenum: 0,
					btncolor: '',
					btn_style:'',
					// 基础版配置
					upImgBasic: {
						// 后端图片接口地址
						basicConfig: {
							url: common.requestDomain + 'appapi.php?g=Appapi&c=HouseApi&a=utilities_image'
						},
						// 是否开启提示(提醒上传图片的数量)
						tips: true,
						// 是否开启notli(开启的话就是选择完直接上传，关闭的话当count满足数量时才上传)
						notli: true,
						// 图片数量
						count: 9,
						// 相机来源(相机->camera,相册->album,两者都有->all,默认all)
						sourceType: 'all',
						// 是否压缩上传照片(仅小程序生效)
						sizeType: true,
						// 上传图片背景修改 
						upBgColor: '#E8A400',
						// 上传icon图标颜色修改(仅限于iconfont)
						upIconColor: '#fff',
						// 上传svg图标名称
						// upSvgIconName: 'icon-card',
						// 上传文字描述(仅限四个字)
						// upTextDesc: '上传证书',
						// 删除按钮位置(left,right,bleft,bright),默认右上角
						delBtnLocation: '',
						// 是否隐藏添加图片
						// isAddImage: false,
						// 是否隐藏删除图标
						// isDelIcon: false,
						// 删除图标定义背景颜色
						// delIconColor: '',
						// 删除图标字体颜色
						// delIconText: '',
						// 上传图标替换(+),是个http,https图片地址(https://www.playsort.cn/right.png)
						iconReplace: common.requestDomain + 'static/images/house/upimage.png',
					},
					user_options:{},
					cat_id: 0,
					village_id: 0,
					pigcms_id: 0,
					repair_id: 0,
				};
			},
			onShow() {
				// #ifdef H5
					common.hideWxShare()
				// #endif
			},
			onLoad: function (options) {
			  _this = this;
			  _this.repair_id = options.id;
			 _this.btncolor = app.globalData.config.config.mobile_head_color;
			 _this.btn_style = 'background-color: ' + _this.btncolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.btncolor + ';';
			  common.setMainColor(_this, function(config) {
			  	_this.fab_pattern = {
			  		buttonColor: app.globalData.config.config.mobile_head_color
			  	}
			  	if (app.globalData.tabBar && app.globalData.tabBar.list) {
			  		_this.fab_content = app.globalData.tabBar.list;
			  	}
			  });
			  common.getTxtKey('水电煤上报').then(key => {
			    uni.setNavigationBarTitle({
			      title: key
			    });
			  }, () => {});
			  
			  const res = uni.getStorageSync('village_key');
			  if (res) {
			  	_this.village_id = res.village_id;
			  	_this.pigcms_id = res.pigcms_id;
			  	_this.village_name = res.village_name;
			  };
			  
			  
			},
			mounted() {
			},
			components: {
				sunuiUpimg,
				uniFab,
				uniRate
			},
			methods: {
				getLocation_msg(res){
					console.log('反馈信息：', res);
					_this.address = res.name;
				},
				tapChange(e){
					console.log(e.cat_id)
					_this.cat_id = e.cat_id;
				},
				taprate(e){
					_this.ratenum = e.value
				},
				uPublishTap() {
					if(!_this.aricle_title || _this.aricle_title == ''){
						uni.showModal({
							title: common.changeTxt('提示'),
							content: common.changeTxt('您需要输入一些文字才能上报'),
							showCancel: false,
							confirmText: common.changeTxt('好的'),
							success: function(res) {
								
							}
						})
						return false;
					}
					console.log("评分分分分呢发呢发呢发呢发",_this.ratenum)
					var postData = {
						village_id: _this.village_id,
						pigcms_id: _this.pigcms_id,
						comment: _this.aricle_title,
						inputimg: _this.basicArr,
						id: _this.repair_id,
						score: _this.ratenum,
					};
					console.log('_this.basicArr.postData', postData);
					
					common.post('HouseApi&a=village_comment_new', postData
					, data => {
					  uni.showModal({
					  	title: common.changeTxt('提示'),
					  	content: common.changeTxt('提交成功'),
					  	showCancel: false,
					  	confirmText: common.changeTxt('好的'),
					  	success: function(res) {
					  		if (res.confirm) {
					  			uni.navigateBack();
					  		}
					  	}
					  });
					});
				},
				// 删除图片 -2019/05/12(本地图片进行删除)
				async delImgInfo(e) {
					console.log('你删除的图片地址为:', e, this.basicArr.splice(e.index, 1));
					_this.imglength = _this.imglength - 1;
					_this.imgnum = _this.imgnum + 1
				},
				// 基础版
				async upBasicData(e) {
					console.log('===>',e);
					// 上传图片数组
					let arrImg = [];
					for (let i = 0, len = e.length; i < len; i++) {
						try {
							if (e[i].path_server != "") {
								await arrImg.push(e[i].path_server);
							}
						} catch (err) {
							console.log('上传失败...');
						}
					}
					// 图片信息保存到data数组
					this.basicArr = arrImg;
					 _this.imglength = this.basicArr.length;
					 _this.imgnum = _this.imgnum - 1;
					// 可以根据长度来判断图片是否上传成功. 2019/4/11新增
					if (arrImg.length == this.upImgBasic.count) {
						uni.showToast({
							title: `上传成功`,
							icon: 'none'
						});
					}
				},
				trigger(param) {
					var url = param.item.pagePath;
					if (_this.village_id) {
						url = common.changeURLArg(url, 'village_id', _this.village_id);
					}
					if (_this.pigcms_id) {
						url = common.changeURLArg(url, 'pigcms_id', _this.pigcms_id);
					}
					console.log('tabbar url', url);
					common.parseUrl(url, '', false, param.item.text);
				},
			}
		}
	
</script>

<style>
	.container {
		margin: 0px;
		background: #FFFFFF;
		overflow: hidden;
		padding-bottom: 50rpx;
	}
	.container-box {
		background: #FFFFFF;
		padding: 27rpx;
	}
	.info-box {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.info-icon {
		width:78rpx;
		height:78rpx;
	}
	.info-img {
		width: 100%;
		height: 100%;
	}
	.name {
		font-size:30rpx;
		font-weight:500;
		color:rgba(51,51,51,1);
		line-height:78rpx;
		padding-left: 18rpx;
	}
	.input-box {
		margin-top: 40rpx;
	}
	.input-btn {
		height: 150rpx;
		width: 100%;
	}
	.banner {
		background: #FFFFFF;
		overflow: hidden;
		padding-left: 27rpx;
		margin-top: 15rpx;
	}
	.assort {
		background: #FFFFFF;
		margin-top: 15rpx;
		padding: 18rpx 0;
	}
	.cat_text {
		font-size:32rpx;
		font-weight:500;
		color:rgba(51,51,51,1);
		line-height:60rpx;
	}
	.assort-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.opt {
		background: #FFFFFF;
	}
	.opt-assort {
		height:65rpx;
		background:rgba(244,244,244,1);
		border-radius:33rpx;
		padding: 0 32rpx;
		font-size:24rpx;
		font-weight:500;
		color:rgba(102,102,102,1);
		line-height:65rpx;
		margin: 15rpx 0rpx 15rpx 27rpx;
	}
	.address {
		margin-left: 0rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		border:2rpx solid rgba(209,209,209,1);
		border-radius:30rpx;
		display:inline-block;
	}
	.address-text {
		font-size:24rpx;
		font-weight:500;
		color:rgba(204,204,204,1);
		line-height:40rpx;
		padding: 8rpx 20rpx 8rpx 10rpx;
	}
	.address-text:before {
		content: "";
		width:45rpx;
		height:45rpx;
		background: url(../../../static/images/dingwei.png) no-repeat;
		background-size: cover;
		display: block;
		float: left;
	}
	.address-text.has{
		color:black;
	}
	.btn {
		margin: 74rpx 0rpx;
		height: 100%;
	}
	.btn-pry {
		width:680rpx;
		height:98rpx;
		background:rgba(6,193,174,1);
		border-radius:49rpx;
		line-height: 98rpx;
		margin-top: 220rpx;
	}
	.content-class {
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
	.tips {
		width: 100%;
		margin-left: 48rpx;
		color: #CCCCCC;
	}
	.rate {
		
	}
	.rate-text {
		color: #F2C028;
	}
</style>
